<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8">
    <title>MyBlog-ForgetPassword</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--====== Favicon Icon ======-->
    <link rel="shortcut icon" href="assets/images/favicon.png" type="image/png">
    <!--====== Bootstrap CSS ======-->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <!--====== SignIn CSS ======-->
    <link rel="stylesheet" href="assets/css/signin.css">
    <link rel="stylesheet" href="assets/css/verify.css">
</head>

<body style="background-color: whitesmoke">
<!--====== 从这里开始 ======-->
<form class="form-signin">
    <div style="text-align: center">
        <img class="mb-4" src="assets/images/signin/blog-icon.png" alt="" width="72" height="72">
    </div>
    <h3 class="mb-3 font-weight-normal" style="text-align: center">忘记密码</h3>
    <label for="phone" class="sr-only">手机号</label>
    <input type="text" id="phone" class="form-control" placeholder="phone" required autofocus>
    <div id="mpanel4" style="display: none"></div>
    <button id="btn" class="btn btn-lg btn-primary btn-block" type="button" onclick="buildCode()" style="width: 100%">人机验证</button>
    <button id="btn_s" class="btn btn-lg btn-primary btn-block" type="button" onclick="checkUser()" style="width: 100%;display: none">提交</button>
    <button id="get_model" data-toggle="modal" data-target="#ModalCenter" type="button"style="display: none">获取模态框</button>
    <div class="mb-3">
    </div>
    <div style="text-align: center">
        <p class="mt-5 mb-3 text-muted">&copy; 2018-2020</p>
    </div>
</form>
<!-- Modal -->
<div class="modal fade" id="ModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalCenterTitle">提交审核</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form class="form-signin">
                    <label for="username" class="sr-only">用户名：</label>
                    <input type="text" id="username" class="form-control" placeholder="username" readonly required autofocus>
                    <label for="reason" class="sr-only">请求理由：</label>
                    <input type="text" id="reason" class="form-control" placeholder="reason" readonly required autofocus>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="sendMsg()">发送</button>
            </div>
        </div>
    </div>
</div>

<!--====== 从这里结束 ======-->

<!--====== 自定义代码结束 ======-->


<!--导入所有js文件-->
<!--====== Jquery js ======-->
<script src="assets/js/vendor/jquery-1.12.4.min.js"></script>
<script src="assets/js/vendor/modernizr-3.7.1.min.js"></script>
<!--====== Bootstrap js ======-->
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<!--====== Ajax Contact js ======-->
<script src="assets/js/ajax-contact.js"></script>

<script src="assets/js/util/HttpUtil.js"></script>
<script src="assets/js/verify.js"></script>
</body>

</html>
<script type="text/javascript">
    let time = 10;
    function buildCode() {
        $("#mpanel4").show();
        $("#btn").hide();
    }
/*    function check() {
        let phone = $("#phone").val();
        let  url="sendSms";
        let params = {phone:phone};
        doCasualPost(url,function () {
            $("#btn_s").show();
            console.log("检验成功");
        },params);
        $("#btn").attr("disabled",true);
        let timer = setInterval(function () {
            if(time == 0){
                $("#btn").removeAttr("disabled");
                $("#btn").html("重新生成");
                clearInterval(timer);
            }else {
                $("#btn").html("重新生成"+"("+time+")");
                time--;
            }
        },1000);
    };*/

    function checkUser() {
        let phone = $("#phone").val();
        let  url="checkPhone.do";
        let params = {phone:phone};
        doCasualPost(url,function (data) {
            console.log("检验用户");
            if (data!=null){
                console.log(data);
                $("#get_model").click();
                $("#username").val(data);
                $("#reason").val("申请初始化密码");
            }else {
                location.href = ("http://localhost:8080/blog_view/forget-password.html");
            }
        },params);
    }
    function sendMsg() {
        let username = $("#username").val();
        let  url="checkCode.do";
        let params = {username: username};
        doCasualPost(url,function (data) {
            if (data==null){
                alert("已申请，请等待通知");
                console.log("成功");
                location.href = ("http://localhost:8080/blog_view/login.html");
            }
        },params)
    }
</script>
<script>
    $('#mpanel4').slideVerify({
        type : 2,		//类型
        vOffset : 5,	//误差量，根据需求自行调整
        vSpace : 5,	//间隔
        imgName : ["1.jpg", '2.jpg'],
        imgSize : {
            width: '300px',
            height: '200px',
        },
        blockSize : {
            width: '40px',
            height: '40px',
        },
        barSize : {
            width : '300px',
            height : '40px',
        },
        ready : function() {
        },
        success : function() {
            alert('验证成功，点击提交开始检测用户！');
            $("#btn_s").show();
        },
        error : function() {
            alert('验证失败！');
            location.href="http://localhost:8080/blog_view/forget-password.html";
        }

    });

</script>